<script>
import { getTnergyManageConsumptionSum } from '@api/api'
import dayjs from 'dayjs'
import moment from 'moment'

export default {
  name: 'RangePicker',
  model: {
    prop: 'modelValue',
    event: 'input'
  },
  props: {
    modelValue: {
      type: Array,
      default: () => null
    },
    rangeValue: {
      type: String,
      default: 'a' // 默认值
    }
  },
  data() {
    return {
      localRangeValue: this.rangeValue,
      value: [
        moment(dayjs().format('YYYY-MM-DD 00:00:00'), 'YYYY-MM-DD HH:mm:ss'),
        moment(
          dayjs()
            .add(1, 'day')
            .format('YYYY-MM-DD 00:00:00'),
          'YYYY-MM-DD HH:mm:ss'
        )
      ]
    }
  },
  watch: {
    modelValue: {
      handler(val) {
        if (!val) {
          return
        }
        this.value = [
          moment(dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'), 'YYYY-MM-DD HH:mm:ss'),
          moment(dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss'), 'YYYY-MM-DD HH:mm:ss')
        ]
      },
      immediate: true
    },
    rangeValue(newVal) {
      this.localRangeValue = newVal
    },
    localRangeValue(newVal) {
      this.$emit('update:rangeValue', newVal)
    }
  },
  methods: {
    onChange(value, dateString) {
      this.value = dateString
      this.$emit('input', dateString)
      this.$emit('change')
    },
    handleRadioChange(e) {
      const type = e.target.value
      const value = []
      // 根据选中的 value 执行不同的逻辑
      if (type === 'a') {
        // 今日选中的事件处理逻辑
        value[0] = dayjs().format('YYYY-MM-DD 00:00:00')
        value[1] = dayjs()
          .add(1, 'day')
          .format('YYYY-MM-DD 00:00:00')
      }
      if (type === 'b') {
        // 昨日选中的事件处理逻辑
        value[0] = dayjs()
          .subtract(1, 'day')
          .format('YYYY-MM-DD 00:00:00')
        value[1] = dayjs().format('YYYY-MM-DD 00:00:00')
      }
      if (type === 'c') {
        // 本周选中的事件处理逻辑
        value[0] =
          dayjs()
            .day(1)
            .format('YYYY-MM-DD') + ' 00:00:00'
        value[1] =
          dayjs()
            .day(1 + 7)
            .format('YYYY-MM-DD') + ' 00:00:00'

        // 这里可以加入你想要执行的操作，例如请求数据或更新页面内容
      }
      if (type === 'd') {
        // 本月选中的事件处理逻辑
        value[0] =
          dayjs()
            .startOf('month')
            .format('YYYY-MM-DD') + ' 00:00:00'
        value[1] =
          dayjs()
            .endOf('month')
            .add(1, 'day')
            .format('YYYY-MM-DD') + ' 00:00:00'
        // 这里可以加入你想要执行的操作，例如请求数据或更新页面内容
      }
      if (type === 'e') {
        // 上个月选中的事件处理逻辑
        value[0] =
          dayjs()
            .subtract(1, 'month')
            .startOf('month')
            .format('YYYY-MM-DD') + ' 00:00:00'
        value[1] =
          dayjs()
            .subtract(1, 'month')
            .endOf('month')
            .add(1, 'day')
            .format('YYYY-MM-DD') + ' 00:00:00'

        // 这里可以加入你想要执行的操作，例如请求数据或更新页面内容
      }

      this.value = [moment(value[0], 'YYYY-MM-DD HH:mm:ss'), moment(value[1], 'YYYY-MM-DD HH:mm:ss')]

      this.$emit('handleRadioChange', type)
      this.$emit('input', value)
      this.$emit('change')
    }
  },
  mounted() {
    this.handleRadioChange({
      target: {
        value: this.rangeValue
      }
    })
  }
}
</script>

<template>
  <div style="display: flex; flex-direction: row;margin-top: 10px">
    <a-range-picker
      v-model="value"
      format="YYYY-MM-DD"
      :placeholder="['开始时间', '结束时间']"
      @change="onChange"
      style="width: 350px;margin-right: 10px;"
      v-bind="$attrs"
    >
    </a-range-picker>
    <div style="display: inline-flex;">
      <a-radio-group v-model="localRangeValue" button-style="solid" @change="handleRadioChange">
        <a-radio-button value="a">
          今日
        </a-radio-button>
        <a-radio-button value="b">
          昨日
        </a-radio-button>
        <a-radio-button value="c">
          本周
        </a-radio-button>
        <a-radio-button value="d">
          本月
        </a-radio-button>
        <a-radio-button value="e">
          上个月
        </a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

<style scoped></style>
